<!DOCTYPE html>
<html>
<head>
    <link rel="icon" type="image/png" href="st/og-image.png">
    <title>拖拽</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
    <!--<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">-->
    <!--<link rel="stylesheet" type="text/css" href="st/theme.css">-->
    <link rel="stylesheet" href="__PUBLIC__/drag/drag.css"  media="all">
</head>
<style>
    html{
        min-height: 100%;
    }
    body {
        font-family: Helvetica Neue, Helvetica, Arial;
        background: rgb(244, 194, 154); /* Old browsers */
        background: -moz-linear-gradient(top, #fff 0%, rgb(244, 194, 154) 100%); /* FF3.6-15 */
        background: -webkit-linear-gradient(top, #fff 0%, rgb(244, 194, 154) 100%); /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(to bottom, #fff 0%, rgb(244, 194, 154) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        margin-bottom: 100px;
        min-height: 100%;
        margin-right: 100px;
        margin-left: 30px;
    }
    .example2{
        font-size: 14px;
        width: 230px;
        min-width: 230px;
        min-height: 350px;
        color:#FF5722;
        padding: 10px 30px;
        text-align: center;
        /*margin-top: 15px;*/
        /*margin-left: 5px;*/
        /*margin-right: 15px;*/
        background-color: #fff;
        display: inline-block;
        vertical-align: top;
        /*font-weight: bold;*/
        box-shadow: 2px 2px 2px 2px #cdcdcd;
    }
    .list-group-item{
        /*width: 20rem;*/
        margin-top: 5px;
        margin-bottom: 5px;
        margin-right: 0;
        min-height: 30px;
        color: #212529;
    }
    .shared-lists{
        margin-right: 15px;
        margin-left: 15px;
        /*display: flex;*/
        width: 220px;
    }

    .container{
        padding-top: 20px;
        width: 90%;
        margin: auto;
        min-width: 1100px;
        max-width: 1300px;
        position: relative;
    }

    .box{
        width: 22%;
        min-width: 220px;
        padding: 0 15px 15px 0;
        margin-right: 15px;
    }
    .box-day{
        display: flex;
        padding-top: 15px;
        font-size: 14px;
        color: #007bff;
        text-align: center;
        /*margin-left: 15px;*/
        /*margin-right: 15px;*/
    }
    .datsORtime{
        /*box-shadow: 2px 2px 2px 2px #cdcdcd;*/
        width: 230px;
        min-width: 230px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        margin-right: 7px;
        margin-left: 15px;
        font-size: 18px;
        /*padding-right: 15px;*/
    }
</style>
<body>
<div class="container">
    <div class="box-day">
        {notempty name="$schedule"}
            {volist name="$schedule" id="sc"}
            <div class="datsORtime">
                <span>DAY{$sc.dayNum}</span>
                <span style="color:#333;font-size: 18px;margin-left:6px;">{$sc.time}</span>
            </div>
            {/volist}
        {/notempty}
    </div>
    <div id="shared-box" style="display: flex">
        {notempty name="$schedule"}
        {volist name="$schedule" id="sc"}
            <div id="shared-lists" class="shared-lists">
                <input type="hidden" id="tripid" value="{$tripid}">
                <div class="boxcont" id="boxcont">
                    <div id="{$sc.id}" class="example2 schedule_div" style="padding:15px;" value="{$sc.title}">
                        <input type="hidden" class="schedule_id" value="{$sc.id}">
                        {$sc.title}
                        {volist name="$sc.active" id="sc2"}
                        <div class="list-group-item list-group-{$sc2.id}" value="{$sc.title}-{$sc2.poiname}" id="{$sc2.id}">
                            {$sc2.poiname}
                        </div>
                        {/volist}
                    </div>
                </div>
            </div>
        {/volist}
        {/notempty}
    </div>
</div>
<script src="__PUBLIC__/layui/layui.js"></script>
<script src="__PUBLIC__/jquery/jquery.min.js"></script>
<script src="__PUBLIC__/drag/Sortable.js"></script>
<script>
    // <!--each遍历class 小组件托拽-->
    var schedule_id;
    $('.example2').each(function () {
        schedule_id = $(this).find('.schedule_id').val()
        new Sortable( document.getElementById(schedule_id), {
            group: 'shared',
            animation: 150,
            scroll:true,
            forceFallback: true,
            onEnd:function (evt) {
                var schedule_id = evt.to.id;
                var one1=evt.item.id;
                var str = '';
                $("#"+schedule_id).find(".list-group-item").each(function(){
                    str += ","+$(this).attr("id");
                });

                $.ajax({
                    url:"{:url('changeDrag')}",
                    type:'post',
                    data:{type:2,active_id:one1,schedule_id:schedule_id,actives_str:str},
                    success:function(res) {
                        if(res.code==1){

                        }else{
                            layer.msg(res.msg);
                            return false;
                        }
                    }
                });
                return false;
            }
        });
    });

    var sharedlists = document.getElementById('shared-box')
    new Sortable(sharedlists, {
        group: 'shared1',
        sort: true,
        animation: 150,
        scroll:true,
        forceFallback: true,
        onEnd: function (evt) {  //拖拽结束发生该事件
            var tripid = $("#tripid").attr("value");
            var dataschedule_id = evt.to.id;
            var str1 = '';
            $("#"+dataschedule_id).find(".schedule_div").each(function(){
                str1 += ","+$(this).attr("id");
            });

            $.ajax({
                url:"{:url('changeDrag')}",
                type:'post',
                data:{type:1,days_str:str1,tripid:tripid},
                success:function(res) {
                    if(res.code==1){

                    }else{
                        layer.msg(res.msg);
                        return false;
                    }
                }
            });

            return false;
        }
    });
</script>



</body>
</html>